<template>
  <div class="alphabet" ref="wrapper">
    <ul class="Ident">
      <li v-for="(item, index) of cityList" :key="index">
        <h5>{{ index }}</h5>
        <div class="list" v-for="(itemSon, index) of item" :key="index" @click="getAreaCode(itemSon.num)">
          <div>
            <p>{{ itemSon.name }}</p>
            <p>+{{ itemSon.num }}</p>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
  name: 'Alphabet',
  props: ['cityList'],
  data() {
    return {
      scroll: null
    }
  },
  methods: {
    getAreaCode(code) {
      this.$store.commit('getAreaCode', code)
      this.$router.push('/login')
    }
  },
  mounted() {
    this.$nextTick(() => {
      // $nextTick: 当数据更新了，在dom中渲染后，自动执行该函数, 延迟回调, 防止BScroll计算的数据不准确
      this.scroll = new BScroll(this.$refs.wrapper, { click: true }) // 解决点击无效的问题
    })
  }
}
</script>
<style lang="scss" scoped>
.alphabet {
  overflow: hidden;
  position: absolute;
  width: 100%;
  left: 0;
  top: 0.9rem;
  bottom: 20px;
  .Ident {
    height: 0.9rem;
    color: #999;
    font-size: 0.3rem;
    line-height: 0.9rem;
    h5 {
      padding-left: 0.3rem;
      background: #f5f5f5;
    }
    .list {
      padding: 0;

      div {
        display: flex;
        justify-content: space-between;
        height: 0.9rem;
        color: #333;
        line-height: 0.9rem;
        border-bottom: 0.01rem solid #dbdbdb;
        margin: 0 0.45rem 0 0.3rem;

        p:nth-child(1) {
          font-size: 0.32rem;
          color: #333;
        }

        p:last-child {
          font-size: 0.28rem;
          color: #999;
        }
      }
    }

    .list:last-child div {
      border-bottom: 0;
    }
  }
}
</style>
